<template>
  <div class="menu-tree">
    <template v-for="(item,index) in MenuData">
      <el-submenu

        v-if="item.children && item.children.length >= 1"
        :key="index"
        :index="index +''">
        <template slot="title">
          <svg-icon style="font-size: 20px" :icon-class="item.img"></svg-icon>
          <span slot="title">{{item.text}}</span>
        </template>
        <StrongMenu :MenuData="item.children"></StrongMenu>
      </el-submenu>
      <el-menu-item
        v-else
        :key="index"
        @click="handleRoute(item)"
        :index="'/' + item.name"
      >
        <svg-icon v-if="item.img" style="font-size: 20px" :icon-class="item.img"></svg-icon>
        <span slot="title">{{item.text}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "StrongMenu",
  props:["MenuData"],
  data(){
    return {};
  },
  methods:{
    handleRoute(data){
      this.$router.push(data.name);
    }
  }
}
</script>

<style>
/*.menu-tree{*/
/*  overflow: auto;*/
/*}*/
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 199px;
}
.el-menu--collapse>.menu-tree>.el-submenu>.el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden !important;
  visibility: hidden;
  display: inline-block;
}
</style>
